<!--
*@Author: zt
*@Description: 选择参会人员
*@Date: 2024-07-08 17:04:38
-->
<template>
  <u-dialog
    v-bind="$attrs"
    style="top: 10px"
    @close="dialogClose"
    @submit="emits('submit', { rows: state.checkedNodes })"
  >
    <a-layout class="f-h-100" style="height: 83vh">
      <u-collapsed-sider width="250">
        <u-tree
          :treeData="state.uDUsers"
          v-model:expandedKeys="state.expandedKeys"
          v-model:checkedKeys="state.checkedKeys"
          checkable
          @check="treeCheck"
          :fieldNames="{
            title: 'name',
            key: 'keyid',
            children: 'c',
          }"
        />
      </u-collapsed-sider>
      <a-layout-content class="s-bg-white f-padding-20" style="overflow: auto">
        <slot></slot>
        <a-row
          style="
            font-family: PingFang SC Regular, PingFang SC Regular;
            font-weight: 400;
            font-size: 16px;
            color: #333333;
            line-height: 22px;
          "
        >
          {{ selectedMsg }}
        </a-row>
        <a-list
          :grid="{ xs: 1, md: 2, xl: 4, xxl: 7 }"
          :data-source="state.checkedNodes"
          class="f-margin-t20"
        >
          <template #renderItem="{ item }">
            <a-list-item>
              <a-tag class="u-user-tag" closable @close="closeUser(item.keyid)">
                {{ item.name }}
              </a-tag>
            </a-list-item>
          </template>
        </a-list>
      </a-layout-content>
    </a-layout>
  </u-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, watch, useAttrs } from 'vue';
import { _IFormEl, _IExtra } from '@/src/components/common/form/interface';
import { _IColumnProps } from '@/components/common/tableEdit/interface.ts';
import { cloneDeep } from 'lodash';
import { storeToRefs } from 'pinia';
import { useLoginStore } from '@/store';
import * as travelApi from '@/service/administration/travel';
const attrs = useAttrs();
const emits = defineEmits(['submit']);

const { userInfo } = storeToRefs(useLoginStore());
const state = reactive({
  uDUsers: [],
  expandedKeys: ['1'],
  checkedNodes: [],
  checkedKeys: [],
  checkedList: [],
});
const selectedMsg = computed(() => {
  return `已选: ${state.checkedNodes.length}人 `;
});

// 树的点击事件
const treeCheck = (checkedKeys, e) => {
  if (e.checkedNodes.length == 0) {
    state.checkedNodes = [];
    return;
  }
  state.checkedNodes = [];
  e.checkedNodes.forEach(item => {
    item.children.forEach(index => {
      state.checkedNodes.push(index);
    });
  });
  // state.checkedNodes = e.checkedNodes[0].children
};

// 左侧人员的关闭
const closeUser = (key: string) => {
  let tCheckeKeys = cloneDeep(state.checkedKeys).filter(i => {
    return i != key && key.startsWith(i) == false;
  });
  state.checkedKeys = tCheckeKeys;
  state.checkedNodes = cloneDeep(state.checkedNodes).filter(
    i => i.keyid != key
  );
};

// 获取部门树
const getTree = async () => {
  const res = await travelApi.validTreeApply(userInfo.value['unitId']);
  if (res.code == 0) {
    state.uDUsers = res.data;
  }
};

// 弹窗关闭
const dialogClose = () => {
  (state.uDUsers = []),
    (state.expandedKeys = ['1']),
    (state.checkedNodes = []),
    (state.checkedKeys = []),
    (state.checkedList = []);
  // formRef.value.form.resetFields();
};

watch(
  () => attrs.open,
  async (val, nav) => {
    if (val) {
      await getTree();
      if (attrs.admTMeetuserList instanceof Array) {
        if (attrs.admTMeetuserList.length > 0) {
          state.checkedNodes = attrs.admTMeetuserList;
          state.checkedNodes.map(e => {
            e.name = e.fkusername;
            e.keyid = e.fkuserid;
          });
        }
      }
    }
  }
);
</script>

<style lang="scss">
.u-user-tag {
  display: flex;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  justify-content: space-between;
  align-items: center;
  background: #f2f2f2;
  border-radius: 8px 8px 8px 8px;
  border: none;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
}
</style>
